<template>
    <!-- 顶部 -->
    <van-nav-bar title="标题" fixed placeholder>
        <template #left>
            <van-image round width="24px" height="24px" cover :src='headPortrait' />
        </template>

        <template #title>
            <van-search shape="round" placeholder="巧克力慕斯" @focus="$router.push('/search')">
                <template #left-icon>
                    <span>定位</span>
                    <van-popover v-model:show="showLocation" :actions="location" @select="onSelectLocation"
                        placement='bottom-end' :show-arrow="false">
                        <template #reference>
                            <van-icon name="arrow-down" />
                        </template>
                    </van-popover>
                </template>
            </van-search>
        </template>

        <template #right>
            <van-popover v-model:show="showAbility" :actions="ability" @select="onSelectAbility" placement='bottom-end'
                :show-arrow="false">
                <template #reference>
                    <van-icon name="arrow-down" />
                </template>
            </van-popover>
        </template>
    </van-nav-bar>

    <!-- 轮播图 -->
    <van-swipe :autoplay="3000" lazy-render>
        <van-swipe-item v-for="image in images" :key="image">
            <img :src="image" />
        </van-swipe-item>
    </van-swipe>

    <!-- 标签页 -->
    <van-dropdown-menu :z-index="1000">
        <van-dropdown-item title="面包甜点">
            <van-cell center title="全部(233333)" />
            <van-cell center title="中式糕点(3333)" />
            <van-cell center title="西式甜品(2666)" />
            <van-cell center title="广式糖水(556)" />
            <van-cell center title="咖啡(666)" />
            <van-cell center title="其他美食(1314)" />
        </van-dropdown-item>

        <van-dropdown-item :title="sort" ref="item">
            <van-cell center title="智能排序" @click="intelligence" />
            <van-cell center title="离我最近" @click="distance" />
            <van-cell center title="好评优先" @click="evaluate" />
            <van-cell center title="人气最高" @click="popularity" />
        </van-dropdown-item>

        <van-dropdown-item title="筛选" ref="item1">
            <van-cell center title="只看免约">
                <template #right-icon>
                    <van-switch v-model="switch1" active-color="#ff8d1a" size="20px" @click="appointment" />
                </template>
            </van-cell>
            <van-cell center title="节假日可用">
                <template #right-icon>
                    <van-switch v-model="switch2" active-color="#ff8d1a" size="20px" />
                </template>
            </van-cell>
            <van-cell center title="只看新店">
                <template #right-icon>
                    <van-switch v-model="switch3" active-color="#ff8d1a" size="20px" />
                </template>
            </van-cell>

            <p>用餐人数</p>
            <van-row justify="space-between">
                <van-col span="6">
                    <van-button round type="default" size="small">单人餐</van-button>
                </van-col>
                <van-col span="6">
                    <van-button round type="default" size="small">双人餐</van-button>
                </van-col>
                <van-col span="6">
                    <van-button round type="default" size="small">3~4人餐</van-button>
                </van-col>
                <van-col span="6">
                    <van-button round type="default" size="small">5~10人餐</van-button>
                </van-col>
            </van-row>
            <van-row justify="space-between">
                <van-col span="6">
                    <van-button round type="default" size="small">10人以上</van-button>
                </van-col>
            </van-row>
        </van-dropdown-item>
    </van-dropdown-menu>

    <!-- 店铺 -->
    <div class="shops" v-for="item in shopList" @click="handleCellClick(item.id)">
        <div class="pic">
            <img :src='item.img'>
        </div>
        <div class="text">
            <h3>{{ item.StoreName }}</h3>
            <h4>
                <b>{{ item.region + ' | ' + item.classification }}</b>
                <b>{{ item.distance }} Km</b>
            </h4>
            <h5 v-for="val in item.introduce.split('&')">{{ val }}</h5>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { showToast } from 'vant'
import router from '@/router/index'
import { getBanner, getShopList, getScreenDistance, getScreenGoodreview, getScreenPopularity, getScreenExemption, getUsersInfo } from '@/api/api'
import useZBStore from '@/pinia/index'

const store = useZBStore()

// 下拉菜单
const showLocation = ref(false)
const showAbility = ref(false)


// 获取头像
const headPortrait = ref()
onMounted(async () => {
    let res = await getUsersInfo({ id: store.userId })
    if (res.status == 200) {
        headPortrait.value = res.data.toux || 'https://img.xiaopiu.com/userImages/img306164da746310.jpg'
    } else {
        headPortrait.value = 'https://img.xiaopiu.com/userImages/img306164da746310.jpg'
    }
})

// 通过 actions 属性来定义菜单选项
const location = [
    { text: '高新区' },
    { text: '虎丘区' },
    { text: '通安镇' },
]

const ability = [
    { text: '扫一扫' },
    { text: '付款码' },
    { text: '开发票' },
    { text: '加好友' },
]

const onSelectLocation = (action) => showToast(action.text)

const onSelectAbility = (action) => action.text == '扫一扫' ? router.push('/scan') : showToast(action.text)

// 轮播图
const images = ref([])

// 底部
const active = ref(0)
onMounted(async () => {
    let { data } = await getBanner()
    data.forEach(item => {
        images.value.push(item.img)
    })
})

// 标签页

const switch1 = ref(false)
const switch2 = ref(false)
const switch3 = ref(false)

const item = ref(null)
const item1 = ref(null)
const sort = ref('智能排序')

// 智能排序
const intelligence = async () => {
    let { data } = await getShopList()
    shopList.value = data
    item.value?.toggle()
    sort.value = '智能排序'
}

// 按距离排序
const distance = async () => {
    let { data, status } = await getScreenDistance()
    if (status == 200) {
        shopList.value = data
        item.value?.toggle()
        sort.value = '离我最近'
    }
}

// 按好评排序
const evaluate = async () => {
    let { data, status } = await getScreenGoodreview()
    if (status == 200) {
        shopList.value = data
        item.value?.toggle()
        sort.value = '好评优先'
    }
}

// 按人气排序
const popularity = async () => {
    let { data, status } = await getScreenPopularity()
    if (status == 200) {
        shopList.value = data
        item.value?.toggle()
        sort.value = '人气最高'
    }
}

// 是否免预约排序
const appointment = async () => {
    // console.log(switch1.value)
    if (switch1.value) {
        let { data, status } = await getScreenExemption({ eid: 1 })
        if (status == 200) {
            shopList.value = data
            item1.value?.toggle()
        }
    } else {
        let { data } = await getShopList()
        shopList.value = data
        item1.value?.toggle()
    }
}

// 店铺
const shopList = ref([])
onMounted(async () => {
    let { data } = await getShopList()
    shopList.value = data
})
const handleCellClick = (id) => {
    localStorage.setItem('uId', id)
    router.push({
        path: '/restaurantCard', query: {
            id
        }
    })
}

// onMounted(async () => {
//     let { data } = await getChangeSearch(route.query)
//     shopList.value = data
// })

</script>

<style lang="scss" scoped>
.van-search {
    height: 46px;
}

.van-field__control[type=search] {
    border-left: solid 5px #ccc;
    padding-left: 10px;
    font-weight: normal;

}



.shops {
    display: flex;
    padding: 0px 30px;
    background-color: #fff;
    margin: 20px 0px 10px 0px;
}

.pic img {
    width: 100px;
    height: 100px;
}

.shops .text h3 {
    font-size: 30px;
    margin: 10px 0px 20px 20px;
}

.shops .text h4 {
    font-size: 25px;
    margin: 0px;
    width: 540px;
    color: #a6a6a6;
    margin: 0px 0px 30px 45px;
    display: flex;
    justify-content: space-between;
}

.shops .text h4 b {
    font-weight: bold;
}

.shops .text h5 {
    font-size: 25px;
    margin: 0px;
    color: #a6a6a6;
    margin: 0px 0px 10px 45px;
}

body {
    background-color: #f2f2f2;
    padding-bottom: 50px;
}

span {
    margin-right: 15px;
    font-weight: normal;
}

.van-swipe-item img {
    width: 750px;
    height: 340px;
}

p {
    font-size: 20px;
    margin-left: 20px;
    color: #d3d3d3;
}
</style>

<style lang="scss">
.van-popover__action {
    width: 150px;
}

.van-dropdown-menu__title:after {
    border: none;
}
</style>